iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

sass&css 30天學習日誌系列 第 29

SASS : SASS Maps - keys、values、has-key

  • 分享至 

  • xImage
  •  

之前介紹SASS Maps 三個function項目,接著繼續用簡單範例解釋後面3個項目

map-keys($map)
map-values($map)
map-has-key($map, $key)

1.map-keys($map) 列出指定map的全部key

列出指定map裡面的全部key,在此為$color裡面的primary和secondary
如下圖

https://ithelp.ithome.com.tw/upload/images/20200412/201073210dQZRlsvwA.png

2.map-values($map) 列出指定map的全部value

列出指定map裡面的全部value,在此為$color裡面的a56和13a899
如下圖

https://ithelp.ithome.com.tw/upload/images/20200412/20107321uMEUaBn5L4.png

3.map-has-key($map, $key) 確認map中是否有指定key

在此為確認$font這個map中是否有h1,有的話就回傳true,沒有就傳false
如下圖

https://ithelp.ithome.com.tw/upload/images/20200412/20107321lZIaP9b4PO.png

如果設定沒有的key,如p,則他會回傳false

https://ithelp.ithome.com.tw/upload/images/20200412/20107321YRYiP35uXk.png

參考文件
youtube:

Maps in SASS: SASS Tutorials #6 : https://youtu.be/P-fhiNDphec

文件:

Sass Maps : http://www.w3cplus.com/preprocessor/sass-maps.html
初探 Sass Maps 與使用介紹 : http://muki.tw/tech/sass-maps-introduce/
[翻譯]介紹Sass Maps:用法跟例子 : http://t.cn/EZDgybi


上一篇
SASS : SASS Maps - get、merge、remove
下一篇
SASS : Color Function
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言